<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <title>联动组件</title>
    <link rel="stylesheet" href="../stylesheets/common.css" />
    <link rel="stylesheet" href="../stylesheets/table.css" />
    <style>
    .cst{
        font-family: 'microsoft yahei';
        padding-bottom: 10px;
        line-height: 24px;
    }

    .red{
        color: red;
    }
    </style>
</head>

<body>
    <div class="place">
        <span class="label-span">位置：</span>
        <span></span>
    </div>
    <input type="hidden" id="hid_names" value=""/>
    <input type="hidden" id="hid_ids" value=""/>
    <div class="body-warp clearfix">
        <div id="treeContent">
            <div class="panel filter-block">
                <form class="form-inline clearfix">
                    <div class="form-group">
                        <a href="javascript:void(0);" class="btn" id="search-btn">
                            <i class="iconfont">&#xe61b;</i>搜索</a>
                    </div>
                </form>
            </div>
            <div class="panel filter-block cst">
                <b>使用方法：<span class="red">（部分）</span></b><br/>
                父级页面（A页面）配置：<br/>
                1.两个隐藏域，一个用于储存选择后的名字序列，一个用于储存选择后的id序列<br/>
                2.一个closeAll方法（定值），用于弹框中点击确认按钮后同步关闭窗口（可以配置不关闭）<br/>
                3.一个outerMul方法（定值），用于接受联动组件中点击确定按钮（panelview中）后的回调<br/>
                <br/><br/>
                子级页面（B页面）配置：<br/>
                1.配置默认值获取设置，数据源从A页面来，参考配置如下：（红色为A页面中两个隐藏域的id值）<br/>
                var _t0 = $('<span class="red">#hid_names</span>',window.parent.document).val() != undefined ? $('<span class="red">#hid_names</span>',window.parent.document).val() : '' ,<br/>
                    _t1 = $('<span class="red">#hid_ids</span>',window.parent.document).val() != undefined ? $('<span class="red">#hid_ids</span>',window.parent.document).val() : '';<br/>
                2.配置参数对象，对象参数如下：（var obj = {}）<br/>
                obj.gridData -> grid数据源，不考虑静态数据，动态数据源如下配法<br/>
                obj.gridData = {<br/>
                    &nbsp;&nbsp;url:'data-mul.json',<br/>
                    &nbsp;&nbsp;type:'get' <span class="red">//该参数可以不配，默认为post，有必要可以通过此方式改成get</span><br/>
                }<br/>
                obj.columns -> grid原本自带的columns配置，一切配置如前，只用额外加入如下一段：<span class="red">（本段说明不清晰直接弹框内的内页具体页面配置为准）</span><br/>
                范例：<br/>
                obj.columns = [{<br/>
                    &nbsp;&nbsp;title: '字典名称',<br/>
                    &nbsp;&nbsp;dataIndex: 'name',<br/>
                }, {<br/>
                    &nbsp;&nbsp;title: '是否系统值',<br/>
                    &nbsp;&nbsp;dataIndex: 'role'<span class="red">,<br/>
                    &nbsp;&nbsp;renderer: function(cellData, rowData, grid, cellIndex, rowIndex) {<br/>
                        &nbsp;&nbsp;&nbsp;&nbsp;setTimeout(function(){<br/>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for(var i=0,l=_temp.length;i&lt;l;i++){<br/>
                               &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;if(_temp[i].id == rowData.id){<br/>
                                   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;grid.selectRecord(rowIndex);<br/>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;<br/>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};<br/>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};   <br/> 
                        &nbsp;&nbsp;&nbsp;&nbsp;},0);<br/>
                    &nbsp;&nbsp;}</span><br/>
                }];<br/>
                obj.gridTarget -> 创建grid的目标标签<br/>
                obj.panelTarget -> 创建panelview的目标标签<br/>
                obj.tempList -> 配置默认值数组<br/>
                obj.autoClose -> 点击完panelview中的<span class="red">确定按钮</span>后是否调用父级A页面的closeAll方法关闭弹框<br/>
                obj.showName -> panelview显示的文本字段别名<span class="red">（默认用key=name的节点，没有name可以用该节点配置）</span><br/>
                obj.outer -> 回调函数，点击完panelview中的<span class="red">确定按钮</span>后执行的代码<span class="red">（默认执行A页面中的outerMul方法）</span><br/>
                <br/><br/>
                启用组件：<br/>
                gridPanelviewAdv(obj);
            </div>
        </div>
    </div>
    <script type="text/javascript" src="../ext/jquery/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../ext/jquery/selectbox.js"></script>
    <script type="text/javascript" src="../ext/layer/layer.min.js"></script>
   
    <script type="text/javascript" src="../ext/zw/src/jquery-epaging.js"></script>
    <script type="text/javascript" src="../javascripts/tool.js?v=1.3"></script>

    <script>
    $(function(){
        //打开联动菜单
        $('a#search-btn').click(function(){
            //z_openIframe('选择', 1000, 840, 'dynamic-tree-table-inline.html');
            $.layer({
                type: 2,// 0：信息框（默认），1：页面层，2：iframe层，3：加载层，4：tips层。
                maxmin: true,// 是否输出窗口最小化/全屏/还原按钮。 
                shadeClose: false,// 用来控制点击遮罩区域是否关闭层。
                title: '选择',
                area: ['99%', '99%'],
                iframe: {
                    src: 'dynamic-tree-table-inline.html'
                }
            });
        });
    });

    //关闭弹窗
    function closeAll(){
        layer.closeAll();
    };

    //多选回调
    function outerMul(ob){
        console.log('回调成功');
        console.log(ob);
        $('input#hid_names').val(ob.names);
        $('input#hid_ids').val(ob.ids);
    };
    </script>
</body>

</html>
